<template>
  <common-page :title="title" :is-padding="true">
    <el-button slot="header" @click="$emit('close')">返 回</el-button>

    <div slot="content" class="execution-history-overview-wrap">
      <div class="grid-column-2">
        <div class="chart-container">
          <title-chart
            type="chart-bar"
            title="敏感字段 Top5"
            :dataset="pieLeftDataSet"
          ></title-chart>
        </div>
        <div class="chart-container">
          <title-chart
            type="chart-bar"
            title="客户端IP Top5"
            :dataset="pieRightDataSet"
          ></title-chart>
        </div>
      </div>
      <div class="column-divided"></div>
      <div class="grid-column-2">
        <div class="chart-container">
          <title-chart
            type="chart-cirque"
            title="重要数据 Top5"
            :dataset="barLeftDataSet"
          ></title-chart>
        </div>
        <div class="chart-container">
          <title-chart
            type="chart-cirque"
            title="数据分类Top10"
            :dataset="barRightDataSet"
          ></title-chart>
        </div>
      </div>
    </div>
  </common-page>
</template>
<script>
import mixin from "./mixin";
import { getPercent } from "@/utils/util";
export default {
  name: "ReportTable",
  mixins: [mixin],
  data() {
    return {
      pieLeftDataSet: {
        dimensions: ["sensitiveWord", "spreadCount"],
        source: [],
      },
      pieRightDataSet: {
        dimensions: ["sourceIp", "spreadCount"],
        source: [],
      },
      barLeftDataSet: {
        dimensions: ["sensitiveLabel", "spreadCount"],
        source: [],
        option: {
          legend: {
            formatter: function (name) {
              return name + " | ";
            },
          },
          tooltip: {
            show: true,
            position: function (point, params, dom, rect, size) {
              return [0, point[1]];
            },
            formatter: function (params) {
              return `<div>${params.marker} ${params.name} | ${
                params.percent ? params.percent : 0
              }%  ${params.data["spreadCount"]}</div>`;
            },
          },
        },
      }, // 敏感标签
      barRightDataSet: {
        dimensions: ["typeName", "spreadCount"],
        source: [],
        option: {
          legend: {
            formatter: function (name) {
              return name + " | ";
            },
          },
          tooltip: {
            show: true,
            position: function (point, params, dom, rect, size) {
              return [0, point[1]];
            },
            formatter: function (params) {
              return `<div>${params.marker} ${params.name} | ${
                params.percent ? params.percent : 0
              }%  ${params.data["spreadCount"]}</div>`;
            },
          },
        },
      }, // 数据分类Top10
    };
  },
  computed: {
    title: function () {
      return `${this.reportData.data.dbIp}:${this.reportData.data.dbPort}/${this.reportData.data.dbName}(${this.reportData.data.tableName})的报告`;
    },
  },
  methods: {
    // 敏感字段
    getPieLeftDataSet() {
      this.getRankingStat("dbIp,dbPort,dbName,tableName,sensitiveWord", 5).then(
        (res) => {
          this.pieLeftDataSet.source = res;
        }
      );
    },

    // 客户端IP Top5
    getPieRightDataSet() {
      this.getRankingStat("dbIp,dbPort,dbName,tableName,sourceIp", 5).then(
        (res) => {
          this.pieRightDataSet.source = res;
        }
      );
    },

    // 敏感标签
    getBarLeftDataSet() {
      this.getRankingStat(
        "dbIp,dbPort,dbName,tableName,sensitiveLabel",
        5
      ).then((res) => {
        this.barLeftDataSet.source = res;
        let _this = this;
        this.barLeftDataSet.option.legend.formatter = function (name) {
          let nameData = null;
          let countnum = null;
          let count = null;
          _this.barLeftDataSet.source.forEach((item) => {
            countnum = countnum + item.spreadCount;
            if (item.sensitiveLabel == name) {
              nameData = item.sensitiveLabel + " | ";
              count = " " + item.spreadCount;
            }
          });
          nameData = nameData + getPercent(count, countnum) + count;
          return nameData;
        };
      });
    },

    // 数据分级
    // 数据分类Top10
    getBarRightDataSet() {
      this.getRankingStat(
        "dbIp,dbPort,dbName,tableName,sensitiveTypes.typeName"
      ).then((res) => {
        console.log(res);
        this.barRightDataSet.source = res;
        let _this = this;
        this.barRightDataSet.option.legend.formatter = function (name) {
          let nameData = null;
          let countnum = null;
          let count = null;
          _this.barRightDataSet.source.forEach((item) => {
            countnum = countnum + item.spreadCount;
            if (item.typeName == name) {
              nameData = item.typeName + " | ";
              count = " " + item.spreadCount;
            }
          });
          nameData = nameData + getPercent(count, countnum) + count;
          return nameData;
        };
      });
    },

    getParams() {
      return {
        dbIp: [this.reportData.data.dbIp],
        dbPort: [this.reportData.data.dbPort],
        dbName: [this.reportData.data.dbName],
        tableName: [this.reportData.data.tableName],
      };
    },
  },
  mounted() {
    this.getPieLeftDataSet();
    this.getPieRightDataSet();
    this.getBarLeftDataSet();
    this.getBarRightDataSet();
  },
};
</script>
<style scoped lang="scss">
.execution-history-overview-wrap {
  width: 100%;
  height: 100%;
  overflow-y: scroll;

  .chart-container {
    height: 400px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
  }

  .grid-column-2 {
    display: grid;
    grid-column-gap: 12px;
    grid-template-columns: 1fr 1fr;
  }

  .grid-column-1 {
    display: grid;
    grid-column-gap: 12px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }

  .column-divided {
    height: 12px;
    width: 100%;
  }
}
</style>
